<template>
    <div class="container">
        <h1>Vue 3 组件示例</h1>
        父组件信息：{{ parentMessage }}
        <!-- :message="PPPMessage"
         是一个prop绑定，将定义的变量PPPMessage作为message属性传递
         给childComponent -->
         <!-- @updateMessage="change"
          这是一个事件监听器，表示当childComponent发出updateMssage事件时
          父组件中的change方法将被调用 -->
        <childComponent :message="PPPMessage"
        @updateMessage="change"></childComponent>

        <childComponent1></childComponent1>
    </div>
</template>

<script setup>
import {ref} from 'vue'
// 在组件里面嵌套一个子组件，一样的写法
import childComponent from './childComponent.vue';
import childComponent1 from './childComponent1.vue';

const parentMessage = ref('父组件默认信息')

//定义监听到子组件传过来的事件后，我父组件触发的方法
//item这个参数是子组件给的
const PPPMessage = ref('父->子')
const change = (item) => {
    parentMessage.value = item
}
</script>

<style scoped>
.container{
    margin-top:50px;
    background-color: rgb(217, 217, 217);
    border-radius: 15px;
    padding:10px;
    margin:20px;
}
</style>